<template>
	<view v-if="show">
		<view class="main-bottom">
			<view class="bottom-title flex">
				<text>条件跳题</text>
				<switch color="#1F9FFB" @change="switch2" :checked="showswitch2"></switch>
			</view>
			<view class="bottom-content" v-if="showswitch2">
				<view class="content-title">做完此题直接跳到:</view>
				<block v-for="(item,index) in list" :key="index">
					<view class="content-item flex" v-if="item.pid != 4">
						<text>第{{tit_num + index + 1}}题:{{item.ti}}</text>
						<view class="right">
							<label class="radio">
								<radio value="2" @tap="Radio(index)" :checked="item.cleck" color="#1F9FFB" /></label>
						</view>
					</view>
				</block>
			</view>
		</view>
		<button class="buttoncss" @tap="save">确定</button>
	</view>
	<!-- <view class="other" :style="{height:height+'px'}" v-else>
		<view class="other-top flex">
			<image :src="imgurl+'cha.png'" @tap="Hide"></image>
			<text>请选择要跳转的题目</text>
		</view>
		<view class="content-item flex" v-for="(item,index) in list" :key="index">
			<span></span>
			<text>{{item.title}}</text>
			<view class="right">
				<label class="radio">
					<radio value="2" @tap="Radio" :data-index="index" :checked="item.check" color="#1F9FFB" /></label>
			</view>
		</view>
		<button class="buttoncss">确定</button>
	</view> -->
</template>

<script>
	import api from "@/common/api.js";
	import {
		baseURL
	} from "@/common/http.js";
	import app from "../../../App.vue"
	export default {
		data() {
			return {
				imgurl: "",
				height: "",
				type: "",
				show: true,
				showswitch2: false,
				wenid: '',
				id: '',
				xuantiao: '',
				list: [],
				set: '',
				indexs: '',
				xiantiao: '',
				tit_num: 0, //当前题目序号
			};
		},
		methods: {
			switch2(e) {
				let that = this
				this.showswitch2 = e.detail.value
			},
			Radio(index) {
				let that = this
				let idx = index
				this.indexs = index
				this.list.forEach((el, index) => {
					if (index == idx) {
						this.list[index].cleck = true
						this.xuantiao = el.id
					} else {
						this.list[index].cleck = false
					}
				})
			},
			add() {
				this.show = false
			},
			Hide() {
				this.show = true
			},
			save() {
				this.showswitch2 ? '' : this.xuantiao = ''
				if (this.type == 3) {
					uni.navigateTo({
						url: '../editText/editText?shoeset=' + false + '&xuantiao=' + this.xuantiao
					})
				} else {
					uni.navigateTo({
						url: '../editduoChoice/editduoChoice?shoeset=' + false + '&xuantiao=' + this.xuantiao
					})
				}
			}
		},
		onShareAppMessage(options) {
			let shareObj = {
				success: (res) => {
					if (res.errMsg == 'shareAppMessage:ok') {
						uni.showToast({
							title: '分享成功',
							icon: 'success',
							duration: 1500
						})
					}
				},
				fail: () => {
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						uni.showToast({
							title: '取消分享',
							icon: 'none',
							duration: 2000
						})
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				},
				complete: () => {
					// 转发结束之后的回调（转发成不成功都会执行）
				}
			}
		},
		onLoad(options) {
			this.tit_num = parseInt(options.tit_num)
			if (options.xuantiao) {
				this.xuantiao = options.xuantiao
				this.showswitch2 = true
			}
			this.wenid = options.wenid
			this.id = options.id
			this.type = options.type
			this.imgurl = app.globalData.imgurls
			let data = {
				api: 'wentiao',
				wenid: options.wenid,
				id: options.id
			}
			api.look(data).then(res => {
				if (res.code == 200) {
					res.date.map((item, index) => {
						item.cleck = false
						if (item.beitiao == Number(options.id)) {
							item.cleck = true
						}
						return item
					})
					this.list = res.date
					this.list.map((item, index) => {
						if (item.id == this.xuantiao) {
							item.cleck = true
						}
						return item
					})
				}
			}).catch(err => {
				console.log(err)
			})
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight
				}
			});
		}
	}
</script>

<style lang="scss">
	page {
		background: #F0F0F0;
		font-weight: 500;

	}

	.main-top {
		width: 690rpx;
		background: #fff;
		box-shadow: 0rpx 5rpx 15rpx 0rpx #DFDFDF;
		border-radius: 10rpx;
		margin: 20rpx auto;

		.top-title {
			height: 100rpx;
			justify-content: space-between;
			padding: 0 20rpx;
			box-sizing: border-box;
		}
	}

	.top-content {
		.content-item {
			border-top: 1rpx solid #DFDFDF;
			color: #666;
			font-size: 30rpx;
			padding: 0 20rpx;
			box-sizing: border-box;

			.item-top {
				height: 100rpx;
				font-size: 30rpx;

				span {
					width: 20rpx;
					height: 20rpx;
					background: #999;
					border-radius: 50%;
					margin-right: 20rpx;
				}
			}

			.item-bottom {
				height: 100rpx;
				justify-content: space-between;

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}

	.main-bottom {
		width: 690rpx;
		background: #fff;
		box-shadow: 0rpx 5rpx 15rpx 0rpx #DFDFDF;
		border-radius: 10rpx;
		margin: 20rpx auto;

		.bottom-title {
			height: 100rpx;
			justify-content: space-between;
			padding: 0 20rpx;
			box-sizing: border-box;
		}
	}

	.bottom-content {
		border-top: 1rpx solid #DFDFDF;
		padding: 0 15rpx 0 20rpx;

		.content-title {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 24rpx;
			color: #999;
		}

		.content-item {
			justify-content: space-between;
			color: #333;
			font-size: 30rpx;
			height: 100rpx;
			border-bottom: 1rpx solid #DFDFDF;

			text {
				display: inline-block;
				width: 80%;
			}
		}
	}

	.buttoncss {
		width: 690rpx;
		height: 100rpx;
		line-height: 100rpx;
		margin: 0 auto;
		text-align: center;
		color: #fff;
		font-size: 36rpx;
		background: #1F9FFB;
		border-radius: 50rpx;
		position: fixed;
		bottom: 10%;
		left: 30rpx
	}

	.other {
		background: #fff;

		.content-item {
			justify-content: space-between;
			color: #333;
			font-size: 30rpx;
			height: 100rpx;
			border-bottom: 1rpx solid #DFDFDF;
			padding: 0 30rpx;

			text {
				display: inline-block;
				width: 80%;
			}
		}
	}

	.other-top {
		height: 100rpx;
		width: 100%;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #DFDFDF;
		color: #666;
		font-size: 30rpx;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}
</style>
